<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
    <div id=example>
        <input v-model="message" placeholder="input标签输入的值绑定到vue变量，vue变量又动态显示到其他标签">
        <p>Message is:{{message}}</p>
        <br>

        <textarea v-model="message2" placeholder="添加多行富文本"></textarea>
        <p>Message2 is:{{message2}}</p>
        <br>

        <div>
            <p>label for属性规定label标签与哪个表单元素绑定。效果是：选择该label也能选中对应的绑定标签</p>
            <input type="checkbox" id="chinese" value="语文" v-model="checkedNames"><label for="chinese">语文</label>
            <input type="checkbox" id="math"    value="数学" v-model="checkedNames"><label for="math">数学</label>
            <input type="checkbox" id="english" value="英语" v-model="checkedNames"><label for="english">英语</label>

            <p>多选框选中的值：{{checkedNames}}</p>
        </div>
        <br>

        <div>
            <input type="radio" id="man"   value="男" v-model="picked"><label for="man">男</label>
            <input type="radio" id="women" value="女" v-model="picked"><label for="women">女</label>

            <p>单选框选中的值：{{picked}}</p>
        </div>
        <br>

        <button type="button" @click="submit">提交</button>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"",
            message2:"",
            checkedNames: [],
            picked:""
        },
        methods:{
            submit: function(){
                var postObj={
                    message:this.message,
                    message2:this.message2,
                    checkedNames: this.checkedNames,
                    picked:this.picked                       
                };
                console.log(postObj);
            }
        }
    })
</script>
